From ec981fd237a50dfc547d8c162b22f4e1a691c9fc Mon Sep 17 00:00:00 2001
From: Sebastien Castiel <sebastien@castiel.me>
Date: Wed, 6 Dec 2023 21:07:51 -0500
Subject: Improve responsiveness

---
 src/app/groups/[groupId]/reimbursement-list.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

(limited to 'src/app/groups/[groupId]/reimbursement-list.tsx')

diff --git a/src/app/groups/[groupId]/reimbursement-list.tsx b/src/app/groups/[groupId]/reimbursement-list.tsx
index 3fc94bc..e8400ca 100644
--- a/src/app/groups/[groupId]/reimbursement-list.tsx
+++ b/src/app/groups/[groupId]/reimbursement-list.tsx
@@ -20,11 +20,13 @@ export function ReimbursementList({
   return (
     <div className="text-sm">
       {reimbursements.map((reimbursement, index) => (
-        <div className="border-t p-4 flex justify-between" key={index}>
-          <div>
-            <strong>{getParticipant(reimbursement.from)?.name}</strong> owes{' '}
-            <strong>{getParticipant(reimbursement.to)?.name}</strong>
-            <Button variant="link" asChild className="-my-3">
+        <div className="border-t px-6 py-4 flex justify-between" key={index}>
+          <div className="flex flex-col gap-1 items-start sm:flex-row sm:items-baseline sm:gap-4">
+            <div>
+              <strong>{getParticipant(reimbursement.from)?.name}</strong> owes{' '}
+              <strong>{getParticipant(reimbursement.to)?.name}</strong>
+            </div>
+            <Button variant="link" asChild className="-mx-4 -my-3">
               <Link
                 href={`/groups/${groupId}/expenses/create?reimbursement=yes&from=${reimbursement.from}&to=${reimbursement.to}&amount=${reimbursement.amount}`}
               >
-- 
cgit v1.3